<!-- 我的表格 -->

<template>
  <WebTable :list="list">
    <RowCheckbox fixLeft />

    <RowIndex fixLeft />

    <RowTitle bind="name" fixLeft />

    <RowText bind="name" />

    <RowName />

    <RowPhone />

    <RowIdNo />

    <RowGender />

    <!-- 对 RowSlot 组件提供一个 exportTrans 方法供导出使用 -->
    <RowSlot label="年龄" bind="age" sort :exportTrans="(row) => CORE.numCN(row.age)">
      <template #default="{ row }">
        <span>{{ CORE.numCN(row.age) }}</span>
      </template>
    </RowSlot>

    <!-- 先以 row.roleId 进行字典转换，为空再取 role.roleName 值，防止删除该角色后无法显示历史的名称 -->
    <RowDict label="关联角色" bind="roleId, roleName" :dict="role_selectDict" minWidth="100" />

    <RowDictMulti label="多角色" bind="rolesIdList, rolesNameList" :dict="role_selectDict" minWidth="160" />

    <!-- 先以 row.organId 进行字典转换，为空再取 role.organName 值，防止删除该部门后无法显示历史的名称 -->
    <RowTree label="所属部门" bind="organId, organName" :dict="organ_treeDict" minWidth="100" />

    <RowTreeMulti label="多部门" bind="organsIdList, organsNameList" :dict="organ_treeDict" minWidth="160" />

    <RowPhoto label="头像" />

    <RowImage label="收藏图片" bind="imageList" />

    <!-- 除了 exportTrans 方法供导出使用，还可以提供 exportPrefix、exportSuffix 方法用于添加计算得出的前后缀 -->
    <RowSlot label="收藏文件" :width="100" :exportTrans="(row) => row.fileList.length" :exportSuffix="() => ' 个'">
      <template #default="{ row }">
        <BtnText :title="`${row.fileList.length} 个`" @click="openEasy(row)" />
      </template>
    </RowSlot>

    <RowNum label="年薪" bind="salary" minWidth="120" />

    <RowDate label="入职日期" bind="beginDate" sort />

    <RowDateRange bind="beginDate, endDate" />

    <RowTime label="生效时间" bind="activeTime" />

    <RowTimeRange bind="activeTime, expireTime" />

    <RowSwitch bind="status" />

    <RowStatus fixRight />

    <RowOperate
      :btns="MAP.BTNS"
      :to="`${$route.path}/:id`"
      route="/common/demo-detail.png"
      show="查看"
      edit="修改"
      del="el-icon-delete"
      pass="iconfont icon-jiesuo"
      rej="iconfont icon-suoding"
      newOne
      :width="220"
      fixRight
    />

    <EasyModal title="收藏文档" v-model="easyVisible" bgClose small>
      <MyFile :obj="row" />
    </EasyModal>

    <template #page>
      <span class="flex1">分页插槽</span>
    </template>
  </WebTable>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTable',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('role', 'role_'), CORE.mixTree('organ', 'organ_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 简易弹窗可见
      row: { // 行数据 (初始存在，才能响应)
        fileList: [],
      },
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开简易弹窗
     */
    openEasy(row) {
      this.row = row
      this.easyVisible = true
    },
  },
}
</script>

<style lang="scss">
@import './iconfont/iconfont.css';
</style>
